<!-- top navbar with question title -->
<nav class="navbar navbar-default navbar-fixed-top" av-affix-top=".navbar-unfixed-top" role="navigation">
  <div class="container">
    <div class="row avb-top-navbar">
      <div class="pull-left"
        ng-i18next="[i18next]({sprintf:['1','3', stateData.questionNum+1, election.questions.length]})avBooth.stepAndQuestionNumber">
      </div>
      <div class="pull-right">
        <span
          class="glyphicon glyphicon-question-sign"
          ng-click="launchHelp()">
        </span>
        <span ng-click="launchHelp()" ng-i18next="avBooth.helpTitle"></span>
        <span class="dropdown left-padding" av-change-lang>
      </div>
    </div>

  </div>
</nav>

<div class="wrapper-unfixed">
  <div class="navbar-unfixed-top text-center" av-collapsing=".unfixed-top-height" data-toggle-selector="[avb-multi-question] #avb-toggle">
    <div class="container">
      <div class="hidden unfixed-top-height"></div>
      <h1>{{stateData.question.title}}</h1>
    </div>
  </div>
</div>

<div id="avb-toggle" class="text-center item-block hidden">
  <span class="glyphicon glyphicon-play"></span>
</div>

<div class="content avb-content">
  <div class="container">
    <div class="row question-details">
      <p
      ng-bind-html="stateData.question.description | addTargetBlank"
      class="description">
      </p>
      <span class="selection-info" ng-i18next>
        [i18next]({max: stateData.question.max, count: stateData.pairNum})avBooth.pairwiseBeta.warning
      </span>
    </div>
  </div>
  <div class="container">
    <div class="row pairs">
      <!-- first item of the pair -->
      <div class="col-xs-6 col-sm-offset-1 col-sm-5">
        <div class="clickable" ng-click="selectAnswer(1)">
          <div class="img-wrapper">
            <iframe
              ng-if="isYoutube(one)"
              width="560"
              height="315"
              ng-src="{{getUrls(one)['Image URL']}}"
              frameborder="0"
              allowfullscreen>
            </iframe>
            <img
              ng-if="!isYoutube(one)"
              alt="{{one.text}}"
              ng-if="!!getUrls(one)['Image URL']"
              ng-src="{{getUrls(one)['Image URL']}}" />
          </div>
          <h2 ng-bind-html="one.text"></h2>
          <div class="links">
            <a
              class="text-left"
              target="_blank"
              ng-if="!!getUrls(one)['URL']"
              href="{{getUrls(one)['URL']}}"
              ng-click="$event.stopPropagation(); window.open(getUrls(one)['URL'],'_blank')"
              ng-i18next>
              avBooth.pairwiseBeta.web
            </a>
            <div
              class="text-right category"
              ng-if="one.category && one.category.length > 0">
              {{one.category}}
            </div>
          </div>
          <p class="description" ng-bind-html="one.details"></p>
        </div>
      </div>

      <!-- second item of the pair -->
      <div class="col-xs-6 col-sm-5">
        <div class="clickable" ng-click="selectAnswer(2)">
          <div class="img-wrapper">
            <iframe
              ng-if="isYoutube(two)"
              width="560"
              height="315"
              ng-src="{{getUrls(two)['Image URL']}}"
              frameborder="0"
              allowfullscreen>
            </iframe>
            <img
              ng-if="!isYoutube(two)"
              alt="{{two.text}}"
              ng-if="!!getUrls(two)['Image URL']"
              ng-src="{{getUrls(two)['Image URL']}}" />
          </div>
          <h2 ng-bind-html="two.text"></h2>
          <div class="links">
            <a
              class="text-left"
              target="_blank"
              ng-if="!!getUrls(two)['URL']"
              href="{{getUrls(two)['URL']}}"
              ng-click="$event.stopPropagation(); window.open(getUrls(two)['URL'],'_blank')"
              ng-i18next>
              avBooth.pairwiseBeta.web
            </a>
            <div
              class="text-right category"
              ng-if="two.category && two.category.length > 0">
              {{two.category}}
            </div>
          </div>
          <p class="description" ng-bind-html="two.details"></p>
        </div>
      </div>
    </div>

    <!-- next button -->
    <div
      class="row hidden"
      ng-cloak
      av-affix-bottom="stateData.affixIsSet"
      data-force-affix-width="768">
      <button
        class="btn btn-block btn-lg btn-success btn-plain hidden"
        ng-i18next="avBooth.continueButton"
        ng-if="stateData.pairNum >= stateData.question.max"
        ng-click="continue()">
      </button>
    </div>
  </div>
</div>
